import React from 'react'
import { Toast, NavBar ,Swiper ,ActionBar  } from 'react-vant';
import { CartO, ChatO, Star } from '@react-vant/icons';
import { useNavigate ,useLocation ,useParams} from 'react-router-dom';
import { useDispatch } from 'react-redux';
import {PAYLOADTYPE ,SHOPITEM} from '../Type/Store.d';

function Detail() {
    const Navigate = useNavigate();
    const Location = useLocation();
    const Params = useParams();
    const Dispatch = useDispatch();
    console.log(Location.state);
    const obj = Location.state as PAYLOADTYPE
    const img = obj.img as PAYLOADTYPE[]
    return (
        <div className='Detail'>
            <NavBar
                title="详情页"
                leftText="返回"
                rightText="按钮"
                onClickLeft={() => Navigate(-1)}
                onClickRight={() => Toast('按钮')}
            />
            <main>
                <div className="demo-swiper">
                    <Swiper autoplay={2000} loop={true}>
                        {
                            img.map((item,index)=>{
                                return   <Swiper.Item key={index}>
                                    <img src={item.src} alt="" />
                                </Swiper.Item>
                            })
                        }
                    </Swiper>
                </div>
                <h2>{obj.txt}</h2>
                <h3>￥{obj.price}元</h3>
                <p>详情介绍:<br/>{obj.con}</p>
            </main>
            <footer>
            <ActionBar>
                <ActionBar.Icon icon={<ChatO color="red" />} text="客服" />
                <ActionBar.Icon icon={<CartO color="red" />} text="购物车" onClick={()=>Navigate('/Home/Shop')}/>
                <ActionBar.Icon icon={<Star color="red" />} text="店铺" />
                <ActionBar.Button type="warning" text="加入购物车" onClick={()=>{
                    Dispatch({
                        type:SHOPITEM,
                        payload:obj
                    })
                    Toast('加入成功')
                }}/>
                <ActionBar.Button type="danger" text="立即购买" />
            </ActionBar>
            </footer>
        </div>
    )
}

export default Detail